<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/layerdate.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:43 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>日期选择器layerDate</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/cropper/cropper.min.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>cropper简介</h5>
                </div>
                <div class="ibox-content">
                    <p>A simple jQuery image cropping plugin.</p>
                    <p>官网：<a href="https://fengyuanchen.github.io/cropper/" target="_blank">https://fengyuanchen.github.io/cropper/</a>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>图片裁剪</h5>
                        </div>
                        <div class="ibox-content">
                            <p>
                                一款简单的jQuery图片裁剪插件
                            </p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="image-crop">
                                        <img src="img/a3.jpg">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h4>图片预览：</h4>
                                    <div class="img-preview img-preview-sm"></div>
                                    <h4>说明：</h4>
                                    <p>
                                        你可以选择新图片上传，然后下载裁剪后的图片
                                    </p>
                                    <div class="btn-group">
                                        <label title="上传图片" for="inputImage" class="btn btn-primary">
                                            <input type="file" accept="image/*" name="file" id="inputImage"
                                                   class="hide"> 上传新图片
                                        </label>
                                        <label title="下载图片" id="download" class="btn btn-primary">下载</label>
                                    </div>
                                    <h4>其他说明：</h4>
                                    <p>
                                        你可以使用<code>$({image}).cropper(options)</code>来配置插件
                                    </p>
                                    <div class="btn-group">
                                        <button class="btn btn-white" id="zoomIn" type="button">放大</button>
                                        <button class="btn btn-white" id="zoomOut" type="button">缩小</button>
                                        <button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>
                                        <button class="btn btn-white" id="rotateRight" type="button">右旋转</button>
                                        <button class="btn btn-warning" id="setDrag" type="button">裁剪</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/cropper/cropper.min.js"></script>
<script type="text/javascript">

    let o = $(".image-crop > img");
    $(o).cropper({
        aspectRatio: 1.618, preview: ".img-preview", done: function () {
        }
    });
    let r = $("#inputImage");
    window.FileReader ? r.change(function () {
            var e, i = new FileReader, t = this.files;
            t.length && (e = t[0], /^image\/\w+$/.test(e.type) ? (i.readAsDataURL(e), i.onload = function () {
                    r.val(""), o.cropper("reset", !0).cropper("replace", this.result)
                }) : showMessage("请选择图片文件"))
        }) : r.addClass("hide"),
        $("#download").click(function () {
        window.open(o.cropper("getDataURL"))
    }),
        $("#zoomIn").click(function () {
        o.cropper("zoom", .1)
    }), $("#zoomOut").click(function () {
        o.cropper("zoom", -.1)
    }), $("#rotateLeft").click(function () {
        o.cropper("rotate", 45)
    }), $("#rotateRight").click(function () {
        o.cropper("rotate", -45)
    }), $("#setDrag").click(function () {
        o.cropper("setDragMode", "crop")
    })
</script>
</body>


</html>
